<div
  class="selectable-card is-rounded card-container {{if hasErrorClass 'has-border-danger'}}"
  data-test-replication-secondary-card
>
  {{! Check if Status or Primary Cluster Card }}
  {{#if (eq title 'Status')}}
    <h3 class="title is-5 grid-item-top-left card-title">
      {{title}}
    </h3>
    <div class="grid-item-left">
      {{#if (get (cluster-states state) 'isOk')}}
        <h6 class="title is-6">
          state
        </h6>
        <p class="has-text-grey is-size-8">
          How this cluster is communicating with others at this moment.
        </p>
      {{else}}
        <h6 class="has-text-danger" data-test-error>
          state
        </h6>
        <AlertInline @type="danger" @message="Please check your server logs." />
      {{/if}}
    </div>
    <div class="grid-item-right">
      {{#if (eq connection 'transient_failure')}}
        <h6 class="title is-6 has-text-danger" data-test-error>
          connection_state
        </h6>
        <AlertInline
          @type="danger"
          @message="There has been some transient failure.  Your cluster will eventually switch back to connection and try to establish a connection again."
        />
      {{else if (eq connection 'shutdown')}}
        <h6 class="title is-6 has-text-danger" data-test-error>
          connection_state
        </h6>
        <AlertInline
          @type="danger"
          @message="Your connection has shut down. This may be because the application explicitly requested a shutdown or a non-recoverable error has happened during attempts to communicate."
        />
      {{else}}
        <h6 class="title is-6">
          connection_state
        </h6>
        <p class="has-text-grey is-size-8">
          The health of the connection between this cluster and others.
        </p>
      {{/if}}
    </div>
    <h2 class="title is-3 grid-item-bottom-left" data-test-state>
      {{state}}
      {{#if inSyncState}}
        <ToolTip @verticalPosition="above" as |T|>
          <T.trigger>
            <Icon @glyph={{'check-circle-outline'}} @size="m" class={{'has-text-success'}} data-test-glyph />
          </T.trigger>
          <T.content @class="tool-tip">
            <div class="box">
              Everything is in sync
            </div>
          </T.content>
        </ToolTip>
      {{/if}}
    </h2>
    <h2 class="title is-3 grid-item-bottom-right" data-test-connection>
      {{connection}}
    </h2>
    <div class="grid-item-bottom-row">
      <h6 class="title is-6">
        last_remote_wal
      </h6>
      <p class="has-text-grey is-size-8">
        The last WAL index that the secondary received from the primary. Updates every 10 seconds.
      </p>
      <h2 class="title is-3">
        {{format-number lastRemoteWAL}}
      </h2>
    </div>
  {{else}}
    <div class="grid-item-top-left">
      <h3 class="title is-5 card-title">
        {{title}}
      </h3>
    </div>
      {{#if (and primaryUiUrl knownPrimaryClusterAddrs)}}
        <div class="grid-item-top-right">
          <a href={{concat primaryUiUrl '/ui/'}} class="toolbar-link" data-test-primary-link>
            View primary cluster
            <Icon @glyph='chevron-right' />
          </a>
        </div>
      {{/if}}
    <div class="grid-item-second-row">
      <h6 class="title is-6">
        known_primary_cluster_addrs
      </h6>
      <p class="has-text-grey">
        A list of all the nodes in the primary's cluster. This value is updated every ten seconds.
      </p>
    </div>
    <div class="grid-item-third-row">
      {{#if (is-empty knownPrimaryClusterAddrs)}}
        <EmptyState
          @title="No known_primary_cluster_addrs"
          @message="These addresses are used by the secondary to communicate with the primary cluster.  Should always be non-zero in a functioning replication setup.">
          <LearnLink @path="/vault/operations/monitor-replication">
            Learn more
          </LearnLink>
        </EmptyState>
      {{else}}
        <InfoTable
          @title="Known Primary Cluster Addrs"
          @header="cluster_addr"
          @items={{knownPrimaryClusterAddrs}}
        />
      {{/if}}
    </div>
  {{/if}}
</div>
